<template>
  <a-form-item
    style="margin-left: 10%; width: 85%; "
    label="选择产品"
    :labelCol="labelCol"
    :wrapperCol="wrapperCol"
    has-feedback
  >
    <div style="margin-right: 10px; ">
      <a-button @click="add(-1,{ })" type="primary">新增</a-button>
      <a-button @click="del" type="danger" :disabled="delDisable">删除</a-button>
    </div>
    <vxe-table
      :column-config="{resizable: true}"
      :row-config="{isHover: true}"
      align="center"
      style="margin-right: 110px"
      ref="xTable"
      max-height="280"
      border
      show-overflow
      :data="dataSource"
      :edit-config="{trigger: 'click', mode: 'cell'}"
      @checkbox-all="checkboxAll"
      @checkbox-change="checkboxChange"
    >
      <vxe-column type="checkbox" width="60"></vxe-column>
      <vxe-column min-width="100" field="proId" title="产品名称" :edit-render="{}">
        <template #default="{ row }">
          <span>{{ formatPro(row.proId) }}</span>
        </template>
        <template #edit="{ row }">
          <vxe-select
            v-model="row.proId"
            transfer
            @change="({ value, $event })=>{
              proChange({ value, $event }, row)
            }">
            <vxe-option v-for="item in proList" :key="item.id" :value="item.id" :label="item.name"></vxe-option>
          </vxe-select>
        </template>
      </vxe-column>
      <vxe-column min-width="100" field="num" title="入库数量" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.num" type="number" placeholder="请输入入库数量"></vxe-input>
        </template>
      </vxe-column>
    </vxe-table>
  </a-form-item>
</template>

<script>
import XEUtils from 'xe-utils'
import VXETable from 'vxe-table'

export default {
  name: 'TableFormItem',
  props: {
    dataSource: {
      type: Array,
      require: false,
      default() {
        return []
      }
    },
    proList: {
      type: Array,
      require: false,
      default() {
        return []
      }
    },

    num: {
      type: Number,
      require: false,
      default: null
    },
    plaEndTime: {
      type: String,
      require: false,
      default: null
    }
  },
  data () {
    return {
      delDisable: true,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
      },
      delDataId: []
    }
  },
  methods: {
    formatPro (value) {
      return XEUtils.find(this.proList, item => item.id === value)?.name
    },
    async add(row, record) {
      // 编码处理
      record.code = XEUtils.uniqueId()

      // 变更数量
      const num = this.num
      if (num) {
        record.num = num
      }

      const $table = this.$refs.xTable
      await $table.insertAt(record, row)
      await this.$emit('add', $table.getTableData())
    },
    async del () {
      const type = await VXETable.modal.confirm('您确定要删除该数据?')
      const $table = this.$refs.xTable
      if (type === 'confirm') {
        await $table.removeCheckboxRow()
      }
      await this.$emit('del', $table.getTableData())
    },
    isDisableDel() {
      this.delDisable = this.$refs.xTable.getCheckboxRecords().length <= 0
    },
    checkboxAll({ checked, $event }) {
      this.isDisableDel()
    },
    checkboxChange({ checked, row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event }) {
      this.isDisableDel()
    },
    proChange({ value }, row) {
      const pro = XEUtils.find(this.proList, item => item.id === value)
      if (pro.mulBadItem) {
        row.mulBadItem = pro.mulBadItem.split(';')
      }
    }
  }
}
</script>
